<template>
  <body class="gray-bg">
    <div class="col-sm-9">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>FullCalendar示例</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a
              class="dropdown-toggle"
              data-toggle="dropdown"
              href="calendar.html#"
            >
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li><a href="calendar.html#">选项1</a></li>
              <li><a href="calendar.html#">选项2</a></li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <div id="calendar" class="fc fc-ltr">
            <table class="fc-header" style="width:100%">
              <tbody>
                <tr>
                  <td class="fc-header-left">
                    <span
                      class="fc-button fc-button-prev fc-state-default fc-corner-left"
                      unselectable="on"
                      ><span class="fc-text-arrow">‹</span></span
                    ><span
                      class="fc-button fc-button-next fc-state-default fc-corner-right"
                      unselectable="on"
                      ><span class="fc-text-arrow">›</span></span
                    >
                  </td>
                  <td class="fc-header-center">
                    <span class="fc-header-title"><h2>十二月 2020</h2></span>
                  </td>
                  <td class="fc-header-right">
                    <span
                      class="fc-button fc-button-month fc-state-default fc-corner-left fc-state-active"
                      unselectable="on"
                      >月</span
                    ><span
                      class="fc-button fc-button-agendaWeek fc-state-default"
                      unselectable="on"
                      >周</span
                    ><span
                      class="fc-button fc-button-agendaDay fc-state-default fc-corner-right"
                      unselectable="on"
                      >天</span
                    >
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="fc-content" style="position: relative;">
              <div
                class="fc-view fc-view-month fc-grid"
                style="position:relative"
                unselectable="on"
              >
                <div
                  class="fc-event-container"
                  style="position:absolute;z-index:8;top:0;left:0"
                >
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable"
                    style="position: absolute; left: 159px; width: 73px; top: 68px;"
                    unselectable="on"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-title">日事件</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable"
                    style="position: absolute; left: 159px; width: 307px; top: 40px;"
                    unselectable="on"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-title">长事件</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end"
                    style="position: absolute; left: 315px; width: 73px; top: 68px;"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-time">4p</span
                      ><span class="fc-event-title">重复事件</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end"
                    style="position: absolute; left: 315px; width: 73px; top: 135px;"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-time">4p</span
                      ><span class="fc-event-title">重复事件</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable"
                    style="position: absolute; left: 3px; width: 73px; top: 135px;"
                    unselectable="on"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-time">10:30a</span
                      ><span class="fc-event-title">会议</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable"
                    style="position: absolute; left: 3px; width: 73px; top: 180px;"
                    unselectable="on"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-time">12p</span
                      ><span class="fc-event-title">午餐</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <div
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable"
                    style="position: absolute; left: 81px; width: 73px; top: 135px;"
                    unselectable="on"
                  >
                    <div class="fc-event-inner">
                      <span class="fc-event-time">7p</span
                      ><span class="fc-event-title">生日</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div>
                  </div>
                  <a
                    href="http://baidu.com/"
                    class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end"
                    style="position: absolute; left: 81px; width: 151px; top: 358px;"
                    ><div class="fc-event-inner">
                      <span class="fc-event-title">打开百度</span>
                    </div>
                    <div class="ui-resizable-handle ui-resizable-e">
                      &nbsp;&nbsp;&nbsp;
                    </div></a
                  >
                </div>
                <table
                  class="fc-border-separate"
                  style="width:100%"
                  cellspacing="0"
                >
                  <thead>
                    <tr class="fc-first fc-last">
                      <th
                        class="fc-day-header fc-日 fc-widget-header fc-first"
                        
                      >
                        日
                      </th>
                      <th
                        class="fc-day-header fc-一 fc-widget-header"
                        
                      >
                        一
                      </th>
                      <th
                        class="fc-day-header fc-二 fc-widget-header"
                       
                      >
                        二
                      </th>
                      <th
                        class="fc-day-header fc-三 fc-widget-header"
                       
                      >
                        三
                      </th>
                      <th
                        class="fc-day-header fc-四 fc-widget-header"
                        
                      >
                        四
                      </th>
                      <th
                        class="fc-day-header fc-五 fc-widget-header"
                       
                      >
                        五
                      </th>
                      <th class="fc-day-header fc-六 fc-widget-header "   > 
                        六
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="fc-week fc-first">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-other-month fc-past fc-first"
                        data-date="2020-11-29"
                      >
                        <div style="min-height: 64px;">
                          <div class="fc-day-number">29</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-other-month fc-past"
                        data-date="2020-11-30"
                      >
                        <div>
                          <div class="fc-day-number">30</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-past"
                        data-date="2020-12-01"
                      >
                        <div>
                          <div class="fc-day-number">1</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-past"
                        data-date="2020-12-02"
                      >
                        <div>
                          <div class="fc-day-number">2</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-past"
                        data-date="2020-12-03"
                      >
                        <div>
                          <div class="fc-day-number">3</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-past"
                        data-date="2020-12-04"
                      >
                        <div>
                          <div class="fc-day-number">4</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-past fc-last"
                        data-date="2020-12-05"
                      >
                        <div>
                          <div class="fc-day-number">5</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr class="fc-week">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-today fc-state-highlight fc-first"
                        data-date="2020-12-06"
                      >
                        <div style="min-height: 63px;">
                          <div class="fc-day-number">6</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-future"
                        data-date="2020-12-07"
                      >
                        <div>
                          <div class="fc-day-number">7</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-future"
                        data-date="2020-12-08"
                      >
                        <div>
                          <div class="fc-day-number">8</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-future"
                        data-date="2020-12-09"
                      >
                        <div>
                          <div class="fc-day-number">9</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-future"
                        data-date="2020-12-10"
                      >
                        <div>
                          <div class="fc-day-number">10</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-future"
                        data-date="2020-12-11"
                      >
                        <div>
                          <div class="fc-day-number">11</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-future fc-last"
                        data-date="2020-12-12"
                      >
                        <div>
                          <div class="fc-day-number">12</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 73px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr class="fc-week">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-future fc-first"
                        data-date="2020-12-13"
                      >
                        <div style="min-height: 63px;">
                          <div class="fc-day-number">13</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-future"
                        data-date="2020-12-14"
                      >
                        <div>
                          <div class="fc-day-number">14</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-future"
                        data-date="2020-12-15"
                      >
                        <div>
                          <div class="fc-day-number">15</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-future"
                        data-date="2020-12-16"
                      >
                        <div>
                          <div class="fc-day-number">16</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-future"
                        data-date="2020-12-17"
                      >
                        <div>
                          <div class="fc-day-number">17</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-future"
                        data-date="2020-12-18"
                      >
                        <div>
                          <div class="fc-day-number">18</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-future fc-last"
                        data-date="2020-12-19"
                      >
                        <div>
                          <div class="fc-day-number">19</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr class="fc-week">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-future fc-first"
                        data-date="2020-12-20"
                      >
                        <div style="min-height: 63px;">
                          <div class="fc-day-number">20</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-future"
                        data-date="2020-12-21"
                      >
                        <div>
                          <div class="fc-day-number">21</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-future"
                        data-date="2020-12-22"
                      >
                        <div>
                          <div class="fc-day-number">22</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-future"
                        data-date="2020-12-23"
                      >
                        <div>
                          <div class="fc-day-number">23</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-future"
                        data-date="2020-12-24"
                      >
                        <div>
                          <div class="fc-day-number">24</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-future"
                        data-date="2020-12-25"
                      >
                        <div>
                          <div class="fc-day-number">25</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-future fc-last"
                        data-date="2020-12-26"
                      >
                        <div>
                          <div class="fc-day-number">26</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr class="fc-week">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-future fc-first"
                        data-date="2020-12-27"
                      >
                        <div style="min-height: 63px;">
                          <div class="fc-day-number">27</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-future"
                        data-date="2020-12-28"
                      >
                        <div>
                          <div class="fc-day-number">28</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-future"
                        data-date="2020-12-29"
                      >
                        <div>
                          <div class="fc-day-number">29</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-future"
                        data-date="2020-12-30"
                      >
                        <div>
                          <div class="fc-day-number">30</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-future"
                        data-date="2020-12-31"
                      >
                        <div>
                          <div class="fc-day-number">31</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-01"
                      >
                        <div>
                          <div class="fc-day-number">1</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-other-month fc-future fc-last"
                        data-date="2021-01-02"
                      >
                        <div>
                          <div class="fc-day-number">2</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 28px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr class="fc-week fc-last">
                      <td
                        class="fc-day fc-日 fc-widget-content fc-other-month fc-future fc-first"
                        data-date="2021-01-03"
                      >
                        <div style="min-height: 64px;">
                          <div class="fc-day-number">3</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-一 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-04"
                      >
                        <div>
                          <div class="fc-day-number">4</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-二 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-05"
                      >
                        <div>
                          <div class="fc-day-number">5</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-三 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-06"
                      >
                        <div>
                          <div class="fc-day-number">6</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-四 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-07"
                      >
                        <div>
                          <div class="fc-day-number">7</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-五 fc-widget-content fc-other-month fc-future"
                        data-date="2021-01-08"
                      >
                        <div>
                          <div class="fc-day-number">8</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                      <td
                        class="fc-day fc-六 fc-widget-content fc-other-month fc-future fc-last"
                        data-date="2021-01-09"
                      >
                        <div>
                          <div class="fc-day-number">9</div>
                          <div class="fc-day-content">
                            <div style="position: relative; height: 0px;">
                              &nbsp;
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</template>
<style>
@import "../css/bootstrap.min.css";
@import "../css/style.min.css";
@import "../css/plugins/fullcalendar/fullcalendar.css";
@import "../css/plugins/fullcalendar/fullcalendar.print.css";
</style>
<script>
export default {
  name: "dailing",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>
